<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script>
  // request
  // 1. 使用axios的create创建实例对象 目的是想统一管理整个应用中的其它接口调用
  const service = axios.create({
    baseURL: 'https://apipc-xiaotuxian-front.itheima.net',
    timeout: 5000
  })

  // 2.拦截器(请求 + 响应)
  /*
    核心作用: 在请求参数正式到达后端之前 给到我们一个重新修改的机会
    多个拦截器: 使用use方法后调用的会先执行 然后按照串行的结果对请求数据一次处理 处理完毕之后再交给业务函数
  */
  service.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    console.log('请求拦截器1',config)
    return config
  }, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  })

  service.interceptors.request.use((config) => {
    // 在发送请求之前做些什么
    console.log('请求拦截器2',config)
    return config
  }, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  })

  // 添加响应拦截器
  /* 
    1. response是一个axios自定义的对象结构里面有一个data的属性 放置了后端返回的正式数据
    2. 除了data之外 还有它自己添加的一些属性 比如说config 代表当前此次接口的请求参数 （续签）
    3. 响应式拦截器 成功回调中的返回值 始终会和业务函数中res保证一致
    4. 支持多个响应拦截器 先use的先执行，前一个拦截器处理之后的值 会作为下一个拦截器处理之前的值
  */
  service.interceptors.response.use((response) => {
    // 对响应数据做点什么
    console.log('响应拦截器1',response)
    return response.data
  }, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  })

  service.interceptors.response.use((response) => {
    // 对响应数据做点什么
    console.log('响应拦截器2',response)
    return response.result
  }, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
  })

  // 3. 发送接口请求
  function bannerApi(){
    return service({
      url:'/home/banner',
      method:'GET'
    })
  }

  // 4. 业务使用
  bannerApi().then(res=>{
    console.log(res)
  })

  
  // 为什么要有request模块？
  // 集中管理
  // service实例  对应多个接口请求 
  // 同一个应用中容许出现多个service实例  一部分接口使用A 一部分使用B是完全可行

  
</script>